<template>
<el-container class="page-wrap">

    <el-header class="page-nav" height="30px">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>代码模型</el-breadcrumb-item>
        </el-breadcrumb>
    </el-header>
    <el-main class="page-main" style="padding:0 20px 0 0;">
        <el-form ref="searchForm" class="searchForm" :model="searchForm" :inline="true">

            <el-form-item prop="seqType" label="模型类型">
                <dx-select v-model="searchForm.seqType"  placeholder="请选择" codeType="CODE_MODEL_TYPE">
                    <el-option label="全部" value="" slot="blank"></el-option>
                </dx-select>
            </el-form-item>
            <el-form-item prop="name" label="名称">
                <el-input v-model="searchForm.name"></el-input>
            </el-form-item>
            <el-form-item prop="status" label="分类">
                <dx-select v-model="searchForm.category" codeType="CODE_MODEL_CATEGROIES">
                    <el-option slot="blank" label="全部" value=""></el-option>
                </dx-select>  
                    
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="primary" @click="add">新增</el-button>
            </el-form-item>
        </el-form>
        <dx-table ref="mainTable" :schema="schema" :query="query" @search="pagerhandler" @action="actionHandle"></dx-table>
        <el-dialog :visible.sync="dialogVisible" width="60%">
            <span slot="title"><span v-if="isEdit">修改</span><span v-else>新增</span></span>
            <input-dailog @submitData="submitDataHandle" :dialogVisible.sync="dialogVisible" v-if="dialogVisible" :id="currentId"></input-dailog>
        </el-dialog>
        <el-dialog
            :visible.sync="dialogDemoVisible"
            width="60%">
            <span slot="title">示例</span>
            <demo-dailog @submitData="submitDataHandle" :dialogDemoVisible.sync="dialogDemoVisible" v-if="dialogDemoVisible" :id="currentId"></demo-dailog>
        </el-dialog>
    </el-main>
</el-container>
</template>
<script>
import InputDailog from './input-dialog'
import DemoDailog from './demo-dialog'
import DxTable from '../../Common/ui/dx-table'
import DxSelect from '../../Common/ui/dx-select'
import DxTreeSelect from '../../Common/ui/dx-treeselect'

import DxTreelist from '../../Common/ui/dx-treelist'
import http from '../../../assets/js/http.js'
import toolkit from '../../../assets/js/toolkit.js'
export default {
    components : {
        InputDailog,
        DemoDailog,
        DxTable,
        DxSelect,
        DxTreelist,
        DxTreeSelect,
    },
    data(){

        return {
            dialogVisible : false,
            dialogDemoVisible : false,
            isEdit :false,
            currentId : null,
            schema : {
                columns : [
                    {prop:'code_type',title:'代码标识',width:'200',fixed:true},
                    {prop:'name',title:'名称',width:'150',fixed:true,ellipsis:true},
                    {prop:'seq_type',title:'模型类型',width:'150',ellipsis:true,codeType:'CODE_MODEL_TYPE'},
                    {prop:'categories',title:'分类',width:'100',ellipsis:true,codeType:'CODE_MODEL_CATEGROIES'},
                    {prop:'text_field',title:'显示字段',width:'200',ellipsis:true},
                    {prop:'value_field',title:'值字段',width:'120',ellipsis:true},
                    {prop:'order_list',title:'排序',width:'200',ellipsis:true},
                    {prop:'cache_page_time',title:'缓存时间ms',width:'120'},
                    {prop:'is_system',title:'级别',width:'100',formatter:(row, column)=>{return row[column.property]==1?'系统级':'用户级';}},
                    {prop:'enable',title:'启用',width:'110',ellipsis:true,codeType:'SWITCH_STATUS'}, 
                    {prop:'create_date',title:'创建时间', width:'150', ellipsis:true ,formatter:this.df_short},
                    {prop:'modify_date',title:'修改时间', width:'150', ellipsis:true ,formatter:this.df_short},
                ],
                options:{
                    width:'120',
                    buttons:[
                        {label:'修改',name:'modify'},
                        {label:'示例',name:'view'},
                        {label:'删除',name:'delete'}
                    ]
                },
            },
            query : {
                tableData: [],
                pageSize: 10,
                page: 1,
                orderBy:''
            },
            searchForm : {

                seqType : '',
                category : '',
                name : '',
                codeType : '',
                enable : '',

            },
        

        }
    },
    methods : {

        add(){
            this.isEdit = false;
            this.currentId = null;
            this.dialogVisible = true;
        },
        submitDataHandle(){
            this.search();
        },
        pagerhandler(val){
            this.query.page = val.page;
            this.query.pageSize = val.pageSize;
            this.search();
        },
        search(){

            this.getListData();
        },
        actionHandle(e){
            if(e.name=='modify'){
                this.isEdit = true;
                this.currentId = e.row.id+"";
                this.dialogVisible = true;
            }else if(e.name=='delete'){
                //delete
                this.delete(e.row);
            }else if(e.name=='view'){

                this.currentId = e.row.id+"";
                this.dialogDemoVisible = true;
            }
        },
        delete(row){
            this.$confirm('确定删除'+row.name+'？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				_g.openGlobalLoading()
				this.apiDelete('code/delete',row.id).then((res) => {
					_g.closeGlobalLoading()
					if(res.code==200){
						_g.toastMsg('success', '删除成功')
						setTimeout(() => {
							this.getListData();
						}, 500)
					}else{
                        _g.toastMsg('error', res.msg);
					}
					
				})
			}).catch(() => {
				// catch error
			})
        },
        getListData(){
            let queryParam = {
                params : this.searchForm,
                
            }
            queryParam.params.pageNum = this.query.page;
            queryParam.params.pageSize = this.query.pageSize;
            _g.openGlobalLoading();
            this.apiGet('code/list' , queryParam).then(resp=>{
                _g.closeGlobalLoading();
                if(resp.code==200){

                    if(resp.data.list){
                        this.query.tableData = resp.data.list;
                        this.query.page = resp.data.pageNum;
                        this.query.pageSize = resp.data.pageSize;
                        this.query.total = resp.data.total;

                        this.$refs.mainTable.notifyDataChanged();
                    }
                }
            });
        }
    },
    created(){
       

        // codeProvider.getList('tbuser_code',{login_num:5}).then(result=>{
        //     console.log('result=>',result);
        // });

        // dictProvider.getList('CODE_MODEL_CATEGROIES').then(result=>{
        //     console.log('result=>',result);
        // });
    },
    mounted(){
        this.routeName = this.$route.name;
        _g.closeGlobalLoading();
        this.getListData();
        // for(let i=0;i<5;i++){

        //     setTimeout(() => {
               
        //         locker.lock("demo",()=>{
        //             console.log('test->',i);
        //             locker.releaseLock('demo');
        //         });
        //     }, (10 - i) * 1000);
        // }
      
       
    },
    mixins:[http,toolkit]

}
</script>

<style scoped>

</style>


